"use client"

import { useState } from "react"
import { Search, Edit, MoreHorizontal } from "lucide-react"
import { Input } from "@/components/ui/input"
import { Button } from "@/components/ui/button"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Badge } from "@/components/ui/badge"
import { BottomNavigation } from "@/components/bottom-navigation"
import { mockConversations, getUserById } from "@/lib/mock-data"
import { formatDistanceToNow } from "date-fns"
import Link from "next/link"

export default function MessagesPage() {
  const [searchQuery, setSearchQuery] = useState("")

  const filteredConversations = mockConversations.filter((conv) => {
    const otherUserId = conv.participants.find((id) => id !== "1") // Assuming current user is '1'
    const otherUser = getUserById(otherUserId || "")
    return (
      otherUser?.displayName.toLowerCase().includes(searchQuery.toLowerCase()) ||
      otherUser?.username.toLowerCase().includes(searchQuery.toLowerCase())
    )
  })

  return (
    <div className="min-h-screen bg-gray-50 pb-20">
      {/* Header */}
      <div className="bg-white border-b border-gray-200 sticky top-0 z-40">
        <div className="max-w-md mx-auto px-4 py-3">
          <div className="flex items-center justify-between mb-3">
            <h1 className="text-xl font-bold text-gray-900">Messages</h1>
            <Button variant="ghost" size="sm">
              <Edit size={20} />
            </Button>
          </div>

          {/* Search Bar */}
          <div className="relative">
            <Search className="absolute left-3 top-3 h-4 w-4 text-gray-400" />
            <Input
              placeholder="Search conversations..."
              value={searchQuery}
              onChange={(e) => setSearchQuery(e.target.value)}
              className="pl-10"
            />
          </div>
        </div>
      </div>

      {/* Conversations List */}
      <div className="max-w-md mx-auto">
        {filteredConversations.length === 0 ? (
          <div className="text-center py-12">
            <div className="text-gray-400 mb-2">
              <Edit size={48} className="mx-auto" />
            </div>
            <h3 className="text-lg font-medium text-gray-900 mb-1">No messages yet</h3>
            <p className="text-gray-500">Start a conversation with someone!</p>
          </div>
        ) : (
          <div className="bg-white">
            {filteredConversations.map((conversation) => {
              const otherUserId = conversation.participants.find((id) => id !== "1")
              const otherUser = getUserById(otherUserId || "")

              if (!otherUser) return null

              return (
                <Link
                  key={conversation.id}
                  href={`/messages/${conversation.id}`}
                  className="block border-b border-gray-100 hover:bg-gray-50 transition-colors"
                >
                  <div className="flex items-center space-x-3 p-4">
                    <div className="relative">
                      <Avatar className="h-12 w-12">
                        <AvatarImage src={otherUser.avatar || "/placeholder.svg"} alt={otherUser.displayName} />
                        <AvatarFallback>{otherUser.displayName.charAt(0)}</AvatarFallback>
                      </Avatar>
                      {conversation.unreadCount > 0 && (
                        <Badge className="absolute -top-1 -right-1 h-5 w-5 p-0 flex items-center justify-center text-xs">
                          {conversation.unreadCount}
                        </Badge>
                      )}
                    </div>

                    <div className="flex-1 min-w-0">
                      <div className="flex items-center justify-between">
                        <h3 className="font-semibold text-sm truncate">{otherUser.displayName}</h3>
                        <span className="text-xs text-gray-500">
                          {formatDistanceToNow(new Date(conversation.lastMessage.timestamp), { addSuffix: true })}
                        </span>
                      </div>
                      <p className="text-sm text-gray-600 truncate mt-1">{conversation.lastMessage.content}</p>
                    </div>

                    <Button variant="ghost" size="sm">
                      <MoreHorizontal size={16} />
                    </Button>
                  </div>
                </Link>
              )
            })}
          </div>
        )}
      </div>

      <BottomNavigation />
    </div>
  )
}
